<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 flex items-center justify-center p-4">
    <GameHeader>
      <div class="stats-card">
        <span>尝试次数</span>
        <span class="animate-pulse">{{ attempts }}</span>
      </div>
    </GameHeader>

    <div class="w-[600px] bg-white/10 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/20">
      <h1 class="text-4xl font-extrabold text-center mb-6 text-white">
        寻宝传奇
        <div class="text-base font-normal mt-2 text-white/80">寻找隐藏的宝藏！</div>
      </h1>

      <div class="grid grid-cols-4 gap-3 mb-6">
        <button
          v-for="(cell, index) in grid"
          :key="index"
          @click="handleClick(index)"
          :disabled="treasureFound"
          class="treasure-cell relative aspect-square rounded-lg transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-600 focus:ring-opacity-50 overflow-hidden"
          :class="[
            cell
              ? 'bg-yellow-400'
              : 'bg-gradient-to-br from-blue-400 to-blue-600',
            { 'cursor-not-allowed': treasureFound },
          ]"
        >
          <transition name="fade">
            <span
              v-if="cell"
              class="absolute inset-0 flex items-center justify-center text-4xl animate-bounce-slow"
            >💎</span>
          </transition>
          <div
            v-if="!cell && !treasureFound"
            class="absolute inset-0 bg-white opacity-0 hover:opacity-20 transition-opacity duration-300"
          ></div>
        </button>
      </div>

      <!-- 游戏结束界面 -->
      <GameOver
        v-if="treasureFound"
        title="🎉 恭喜你找到宝藏了！ 🎉"
        @restart="resetGame"
      >
        <p class="text-xl text-gray-700">尝试次数: {{ attempts }}</p>
      </GameOver>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import GameHeader from './common/GameHeader.vue'
import GameOver from './common/GameOver.vue'

const gridSize = 16;
const treasureIndex = ref(Math.floor(Math.random() * gridSize));

const grid = ref(Array(gridSize).fill(false));
const attempts = ref(0);

const treasureFound = computed(() => grid.value[treasureIndex.value]);

const handleClick = (index: number) => {
  if (treasureFound.value) return;

  attempts.value++;

  if (index === treasureIndex.value) {
    grid.value[index] = true;
  }
};

const resetGame = () => {
  grid.value = Array(gridSize).fill(false);
  attempts.value = 0;
  treasureIndex.value = Math.floor(Math.random() * gridSize);
};
</script>

<style scoped>
.treasure-cell {
  height: 100px; /* 固定格子高度 */
  transition: all 0.3s ease;
}

.treasure-cell:hover {
  box-shadow: 0 0 20px rgba(123, 31, 162, 0.7);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.animate-bounce-slow {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
</style>
